<template>
      <div>
            <div class="row">
                  <div class="col-xs-12">
                        <select class="form-control" style="width:200px;" v-model="chartsType">
                              <option value="idc">ID数</option>
                              <option value="sc">購入点数</option>
                              <option value="scc">1人あたり購入点数</option>
                              <option value="sa">金額(千円)</option>
                              <option value="saa">1人あたり金額(円)</option>
                        </select>
                  </div>
            </div>
            <div class="row" style="margin-top: 30px" v-if="titleShowOrHide[0]">
                  <div class="col-xs-6" style="display: block; text-align: center;">
                        <label style="font-size:30px;font-weight:normal;">期間</label>
                  </div>
                  <div class="col-xs-6" style="display: block; text-align: center; font-size: 30px;">
                        <label style="font-size:30px;font-weight:normal;">対比期間</label>
                  </div>
            </div>
            <div class="row" style="margin-top: 30px" v-if="titleShowOrHide[1]">
                  <div class="col-xs-12" style="display: block; text-align: center;">
                        <label style="font-size:30px;font-weight:normal;">{{oneTietleName}}</label>
                  </div>
            </div>
            <!-- 两图三圈 -->
            <div class="row" style="margin-top: 30px;" v-if="chartsShowOrHide[0]">
                  <div class="col-xs-6" id="circle1" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 280px;width: 350px;">
                              <circle cx="180" cy="100" r="80" fill="#FFB800" fill-opacity="0.6"></circle>
                              <circle cx="130" cy="170" r="80" fill="red" fill-opacity="0.6"></circle>
                              <circle cx="230" cy="170" r="80" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="175" y="15" style="font-size: 20px">A</text>
                                    <text x="45"  y="240" style="font-size: 20px">C</text>
                                    <text x="305" y="240" style="font-size: 20px">B</text>
                                    <text x="180" y="65" style="text-anchor: middle">{{returnChartsData("tbl")[0]}}</text>
                                    <text x="220" y="130" style="text-anchor: middle">{{returnChartsData("tbl")[1]}}</text>
                                    <text x="260" y="190" style="text-anchor: middle">{{returnChartsData("tbl")[2]}}</text>
                                    <text x="180" y="210" style="text-anchor: middle">{{returnChartsData("tbl")[3]}}</text>
                                    <text x="100" y="190" style="text-anchor: middle">{{returnChartsData("tbl")[4]}}</text>
                                    <text x="135" y="130" style="text-anchor: middle">{{returnChartsData("tbl")[5]}}</text>
                                    <text x="180" y="150" style="text-anchor: middle">{{returnChartsData("tbl")[6]}}</text>
                              </g>
                        </svg>
                  </div>
                  <div class="col-xs-6" id="circle2" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 280px;width: 350px;">
                              <circle cx="180" cy="100" r="80" fill="#FFB800" fill-opacity="0.6"></circle>
                              <circle cx="130" cy="170" r="80" fill="red" fill-opacity="0.6"></circle>
                              <circle cx="230" cy="170" r="80" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="175" y="15" style="font-size: 20px">A</text>
                                    <text x="45"  y="240" style="font-size: 20px">C</text>
                                    <text x="305" y="240" style="font-size: 20px">B</text>
                                    <text x="180" y="65" style="text-anchor: middle">{{returnChartsData("tbl2")[0]}}</text>
                                    <text x="220" y="130" style="text-anchor: middle">{{returnChartsData("tbl2")[1]}}</text>
                                    <text x="260" y="190" style="text-anchor: middle">{{returnChartsData("tbl2")[2]}}</text>
                                    <text x="180" y="210" style="text-anchor: middle">{{returnChartsData("tbl2")[3]}}</text>
                                    <text x="100" y="190" style="text-anchor: middle">{{returnChartsData("tbl2")[4]}}</text>
                                    <text x="135" y="130" style="text-anchor: middle">{{returnChartsData("tbl2")[5]}}</text>
                                    <text x="180" y="150" style="text-anchor: middle">{{returnChartsData("tbl2")[6]}}</text>
                              </g>
                        </svg>
                  </div>
            </div>
            <!-- 两图两圈 -->
            <div class="row" style="margin-top: 30px;" v-if="chartsShowOrHide[1]">
                  <div class="col-xs-6" id="circle1" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 280px;width: 350px;">
                              <circle cx="130" cy="170" r="80" fill="#FFB800" fill-opacity="0.5"></circle>
                              <circle cx="230" cy="170" r="80" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="20" y="180" style="font-size: 20px">A</text>
                                    <text x="330" y="180" style="font-size: 20px">B</text>
                                    <text x="260" y="180" style="text-anchor: middle">{{returnChartsData("tbl")[2]}}</text>
                                    <text x="180" y="180" style="text-anchor: middle">{{returnChartsData("tbl")[1]}}</text>
                                    <text x="100" y="180" style="text-anchor: middle">{{returnChartsData("tbl")[0]}}</text>
                              </g>
                        </svg>
                  </div>
                  <div class="col-xs-6" id="circle2" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 280px;width: 350px;">
                              <circle cx="130" cy="170" r="80" fill="#FFB800" fill-opacity="0.5"></circle>
                              <circle cx="230" cy="170" r="80" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="20" y="180" style="font-size: 20px">A</text>
                                    <text x="330" y="180" style="font-size: 20px">B</text>
                                    <text x="260" y="180" style="text-anchor: middle">{{returnChartsData("tbl2")[2]}}</text>
                                    <text x="180" y="180" style="text-anchor: middle">{{returnChartsData("tbl2")[1]}}</text>
                                    <text x="100" y="180" style="text-anchor: middle">{{returnChartsData("tbl2")[0]}}</text>
                              </g>
                        </svg>
                  </div>
            </div>
            <!-- 一图三圈 -->
            <div class="row" style="margin-top: 140px;" v-if="chartsShowOrHide[2]">
                  <div class="col-xs-12" id="circle1" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 400px;width: 900px;">
                              <circle cx="440" cy="140" r="110" fill="#FFB800" fill-opacity="0.6"></circle>
                              <circle cx="380" cy="240" r="110" fill="red" fill-opacity="0.5"></circle>
                              <circle cx="500" cy="240" r="110" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="435" y="15" style="font-size: 20px">A</text>
                                    <text x="250" y="330" style="font-size: 20px">C</text>
                                    <text x="620" y="330" style="font-size: 20px">B</text>
                                    <text x="440" y="90" style="text-anchor: middle">{{returnChartsData("tbl")[0]}}</text>
                                    <text x="500" y="170" style="text-anchor: middle">{{returnChartsData("tbl")[1]}}</text>
                                    <text x="540" y="260" style="text-anchor: middle">{{returnChartsData("tbl")[2]}}</text>
                                    <text x="440" y="290" style="text-anchor: middle">{{returnChartsData("tbl")[3]}}</text>
                                    <text x="340" y="260" style="text-anchor: middle">{{returnChartsData("tbl")[4]}}</text>
                                    <text x="380" y="170" style="text-anchor: middle">{{returnChartsData("tbl")[5]}}</text>
                                    <text x="440" y="220" style="text-anchor: middle">{{returnChartsData("tbl")[6]}}</text>
                              </g>
                        </svg>
                  </div>
            </div>
            <!-- 一图两圈 -->
            <div class="row" style="margin-top: 140px;" v-if="chartsShowOrHide[3]">
                  <div class="col-xs-12" id="circle1" style="display: block;text-align: center;">
                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height: 280px;width: 900px;">
                              <circle cx="390" cy="130" r="110" fill="#FFB800" fill-opacity="0.5"></circle>
                              <circle cx="510" cy="130" r="110" fill="#1E9FFF" fill-opacity="0.6"></circle>
                              <g font-size="12px" fill="black" font-family="Verdana">
                                    <text x="260" y="135" style="font-size: 20px">A</text>
                                    <text x="630" y="135" style="font-size: 20px">B</text>
                                    <text x="350" y="135" style="text-anchor: middle">{{returnChartsData("tbl")[0]}}</text>
                                    <text x="450" y="135" style="text-anchor: middle">{{returnChartsData("tbl")[1]}}</text>
                                    <text x="550" y="135" style="text-anchor: middle">{{returnChartsData("tbl")[2]}}</text>
                              </g>
                        </svg>
                  </div>
            </div>
      </div> 
</template>

<script>
export default {
      props:{
            search:{
                  type:Object
            },
            result:{
                  type:Object
            }
      },
      data:function(){
            return {
                  twoCharts_threeCircle_positionX:[180,130,230],
                  twoCharts_threeCircle_positionY:[100,170,170],
                  twoCharts_threeCircle_textPositionX:[175,45,305,180,220,260,180,100,135,180],
                  twoCharts_threeCircle_textPositionY:[15,240,240,65,130,190,210,190,130,150],
                  twoCharts_twoCircle_textPositionX:[20,330,260,180,100],
                  twoCharts_twoCircle_textPositionY:180,
                  chartsColor:['#FFB800','red','#1E9FFF'],
                  chartsType:'idc',
                  selectValue:{'idc':1,'sc':4,'scc':6,'sa':8,'saa':10},
                  oneTietleName:'期間'
            }
      },
      watch:{
            search(){
                  if(this.search !== undefined &&this.search !== ''){
                        if(this.search.kikan_type === 'past'){
                              this.oneTietleName = '期間';
                        }else if(this.search.kikan_type === 'dateGoods'){
                              this.oneTietleName = '期間商品軸';
                        }
                  }
            },
            result(){
                  if(JSON.stringify(this.result) === '{}'){
                        this.chartsType = 'idc';
                  }
            }
      },
      computed:{
            chartsShowOrHide(){
                  if(JSON.stringify(this.result) === '{}' || 
                  this.search === undefined || this.search === ''){
                        return [false,false,false,false]
                  }else if(this.search.kikan_type === 'now' || this.search.kikan_type === 'past'){
                        //说明是两图
                        return this.twoChartsShouldReturnThreeCircleOrTwoCircle();
                  }else{
                        //说明说一图
                        return this.oneChartsShouldReturnThreeCircleOrTwoCircle();
                  }
            },
            returnChartsData(){
                  return function(tabIndex){
                        var typeIndex = this.selectValue[this.chartsType];
                        var count = this.result[tabIndex].length > 5?7:3;
                        var arrIndex = this.result[tabIndex].length > 5?3:2;
                        var chartData = [];
                        for (var index = 1 ; index <= count ; index++) {
                              var chartValue = this.result[tabIndex][arrIndex][typeIndex];

                              chartData.push(chartValue);
                              arrIndex ++;
                        }
                        return chartData;
                  }
            },
            titleShowOrHide(){
                  if(JSON.stringify(this.result) === '{}' || 
                  this.search === undefined || this.search === ''){
                        return [false,false]
                  }else if(this.search.kikan_type === 'now'){
                        //说明是两图
                        return [true,false];
                  }else{
                        //说明说一图
                        return [false,true];
                  }   
            }
      },
      methods:{
            twoChartsShouldReturnThreeCircleOrTwoCircle(){
                  var key = this.search.hasOwnProperty('syohin_module')?'syohin_module':'syohin_jan_module';
                  var circleNum = this.search[key].length;
                  //两图三圆：两图两圆
                  return circleNum === 3 ?[true,false,false,false]:[false,true,false,false]
            },
            oneChartsShouldReturnThreeCircleOrTwoCircle(){
                  var key = this.search.hasOwnProperty('syohin_module')?'syohin_module':'syohin_jan_module';
                  var circleNum = this.search[key].length;
                  //一图三圆：一图三圆
                  return circleNum === 3 ?[false,false,true,false]:[false,false,false,true]
            },
            toThousands(num){
                  return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
                        return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
                              return $1 + ',';
                        });
                  });
            }
      }
}
</script>,